<template>
  <!-- 静态样式 -->
  <h1 class="title" style="font-size: 20px; color: red">App</h1>
  <!-- 动态样式 - 动态class - 字符串形式 -->
  <h1 :class="color">App</h1>
  <!-- 动态样式 - 动态class - 对象形式 -->
  <h1
    :class="{
      green: true,
      red: false,
    }"
  >
    App
  </h1>
  <!-- 动态样式 - 动态class - 数组形式 -->
  <h1 :class="['xxx', color]">App</h1>

  <!-- 动态样式 - 动态style -->
  <h1
    :style="{
      fontSize: '16px',
      color,
    }"
  >
    App
  </h1>

  <h1 class="text">App</h1>
  <button @click="changeColor">切换</button>

  <div class="container">
    <Child />
  </div>
</template>

<script lang="ts">
/*
  样式处理：
    1. 静态样式
    2. 动态样式
      动态class
        字符串形式
        对象形式
        数组形式
      动态style

      class使用变量
      
      总结：样式如果是无限的变化，用动态style，有限的变化用动态class

    3. 让样式只对自己组件元素生效 scoped
      - 给当前组件所有元素添加一个自定义属性 data-v-xxx
        (当前组件的子组件根标签也会添加自定义属性，如果没有根标签就不会了)
      - 给当前组件所有样式添加一个属性选择器 [data-v-xxx]

    4. 需求：在scoped模块下。父组件需要修改子组件的样式
       解决：深度样式选择器（用来修改后代组件样式）
      
*/
import Child from "./Child.vue";

export default {
  name: "App",
  components: { Child },
  data() {
    return {
      color: "red",
    };
  },
  methods: {
    changeColor() {
      this.color = this.color === "red" ? "green" : "red";
    },
  },
};
</script>

<style scoped>
.title {
  margin-top: 30px;
}

.red {
  color: red;
}
.green {
  color: green;
}

/* 深度选择器：用来修改子组件样式 */
/* .container >>> .content {
  color: pink;
} */
/* .container /deep/ .content {
  color: pink;
} */
:deep(.content) {
  color: pink;
}

.text {
  color: v-bind(color);
}
</style>
